<template>
  <div>
    <!--<el-select v-model="buzTaskOptions" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
  </el-select>-->
    <!--<el-button @click="getValue">取值</el-button>-->
    <cardListItem v-for="(item, index) in cardList" :key="item.key" :index="index" :title="item.name" :ask="item.ask" :question-memo="item.questionMemo" :opions-data="item.buzTaskOptions || []" :answer="item.answerKey" :question-type="item.questionType" :aks-img="item.aksImg" />
  </div>

</template>
<script>
import cardListItem from './cardListItem.vue'

export default {
  name: 'CardList',
  components: {
    cardListItem
  },
  props: {
    buzTaskQuestions: {
      type: Array,
      default: () => {}
    },
    questionCount: {
      type: Number,
      default: 0
    },
    updatequestionCount: {
      type: Function
    }
  },
  data() {
    return {
      cardList: [],
      buzTaskOptions: 4,
      options: []
    }
  },
  mounted() {
    this.getOptions()
    console.log(this.buzTaskQuestions, 'buzTaskQuestions')
    this.cardList = this.buzTaskQuestions
  },
  watch: {
    buzTaskQuestions: function(newVal, oldVal) {
      console.log(newVal, 'buzTaskQuestions')
      this.cardList = this.buzTaskQuestions
    }
  },
  methods: {
    createQuestions() {
      var cardcount = this.cardList.length
      // 判断是否应该增减题目
      if (cardcount < this.questionCount) {
        // 增加题目
        for (let i = cardcount; i < this.questionCount; i++) {
          this.cardList.push({ ask: '', buzTaskOptions: [] })
        }
      } else if (cardcount > this.questionCount) {
        // 减少题目
        for (let i = cardcount; i > this.questionCount; i--) {
          this.cardList.pop()
        }
      }
    },
    remove(index) {
      // 此方法删除一个
      this.cardList.splice(index, 1)
      // 更新题目数量的值
      this.updatequestionCount(this.cardList.length)
    },
    getData() {
      return {}
    },
    getOptions() {
      for (var i = 2; i < 10; i++) {
        this.options.push({ label: i, value: i })
      }
    },
    getValue() {
      console.log(this.cardList)
      return this.cardList
    },
    changeData(index, subask) {
      this.cardList[index].ask = subask
    },
    changeMemo(index, submemo) {
      this.cardList[index].questionMemo = submemo
    },
    changeOption(index, suboptions) {
      this.cardList[index].buzTaskOptions = suboptions
    },
    changeAnswerKey(index, subanswer) {
      this.cardList[index].answerKey = subanswer
    },
    changeQuestionType(index, subtype) {
      console.log(`变更题目类型为${subtype}`)
      this.cardList[index].questionType = subtype
    },
    changeAksImg(index, aksImg) {
      this.cardList[index].aksImg = aksImg
    }
  }
}
</script>
<style scoped>

</style>

